<template>
  <div>
    <p>
      次数 {{ count }} ,奇数偶数:{{ isEvenOrOdd }} :监听count:{{ watchCount }}
    </p>
    <button @click="addCount">+</button>
    <button @click="removeCount">-</button>
    <button @click="OddIncrement">OddIncrement</button>
    <button @click="asyncIncrement">asyncIncrement</button>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, ref, watch } from "vue";
// import {createStort} from "vuex";

export default defineComponent({
  // vuex 对多个组件的共享状态进行集中式管理
  // 单向数据流

  setup() {
    onMounted(() => {});

    let count = ref(0);

    let watchCount = ref(0);
    const isEvenOrOdd = computed(() => {
      return count.value % 2 == 0 ? "偶数" : "奇数";
    });

    watch(count, (newv, oldv) => {
      console.log(oldv, newv);
      watchCount.value += newv + oldv;
    });

    function addCount() {
      count.value++;
    }
    function removeCount() {
      count.value--;
    }
    function OddIncrement() {
      count.value % 2 == 0 ? "" : count.value++;
    }
    function asyncIncrement() {
      setTimeout(() => {
        count.value++;
      }, 1000);
    }

    return {
      isEvenOrOdd,
      count,
      watchCount,
      addCount,
      removeCount,
      OddIncrement,
      asyncIncrement
    };
  }
});
</script>

<style scoped></style>
